﻿@{
    ViewBag.Title = "Home Page";
}



<div class="row">
    <div class="col-md-9">
        <div class="jin-flash_header">
            <div class="jin-flash_title">
                <div class="h-icon">
                    <i class="fa fa-hourglass-half fa-2x"></i>
                    <span>&nbsp; 实时快讯</span>
                </div>
                <div class=""></div>
            </div>
            <div class="jin-flash_bar">
                <div class="jin-flash_bar-item">
                    <i class="fa fa-braille"></i>
                    <span>金银 原油</span>
                    <i class="fa fa-chevron-down"></i>
                </div>
                <div class="jin-flash_bar-item">
                    <i class="fa fa-cog fa-spin"></i>
                    <span>设置</span>
                </div>
            </div>
        </div>
        <div class="jin-flash_list">
            <div class="jin-flash_item">
                <div class="l-date">
                    <div class="l-icon">
                        <i class="fa fa-camera-retro"></i>
                    </div>
                    <div class="l-time">09:50:00</div>
                </div>
                <div class="r-content">
                    <div class="r-text">
                        政府工作报告：全年再为企业和个人减税8000多亿元，促进实体经济转型升级，着力激发市场活力和社会创造力。
                    </div>
                </div>
            </div>
            <div class="jin-flash_item important">
                <div class="l-date">
                    <div class="l-icon">
                        <i class="fa fa-camera-retro"></i>
                    </div>
                    <div class="l-time">09:50:00</div>
                </div>
                <div class="r-content">
                    <div class="r-text">
                        政府工作报告：全年再为企业和个人减税8000多亿元，促进实体经济转型升级，着力激发市场活力和社会创造力。
                    </div>
                </div>
            </div>
            <div class="jin-flash_item">
                <div class="l-date">
                    <div class="l-icon">
                        <i class="fa fa-camera-retro"></i>
                    </div>
                    <div class="l-time">09:50:00</div>
                </div>
                <div class="r-content">
                    <div class="r-text">
                        政府工作报告：全年再为企业和个人减税8000多亿元，促进实体经济转型升级，着力激发市场活力和社会创造力。
                    </div>
                </div>
            </div>
            <div class="jin-flash_item">
                <div class="l-date">
                    <div class="l-icon">
                        <i class="fa fa-camera-retro"></i>
                    </div>
                    <div class="l-time">09:50:00</div>
                </div>
                <div class="r-content">
                    <div class="r-text">
                        政府工作报告：全年再为企业和个人减税8000多亿元，促进实体经济转型升级，着力激发市场活力和社会创造力。
                    </div>
                </div>
            </div>
        </div>
        


    </div>
    <div class="col-md-3">
        
    </div>
</div>

@section scripts{
<link href="~/css/font-awesome.css" rel="stylesheet" />
    <style>
        .jin-flash_header {
            color: #07B2AD;
        }
        .h-icon {
            margin-left: 10px;
            color: #07B2AD;
        }
        .h-icon span{
            font-size:24px;
            font-weight:800;
        }
        .jin-flash_title {
            float:left;
        }
        .jin-flash_bar{
            float:right;
        }
        .jin-flash_bar::after{
            clear:both;
        }

        .jin-flash_bar-item {
            display:inline-block;
            margin-left:10px;
        }
        
        .jin-flash_list {
            position: relative;
        }
            .jin-flash_list::before {
                position: absolute;
                content: "";
                top: 0;
                left: 22px;
                width: 0;
                height: 100%;
                border-left: 1px solid #d6e9ff;
            }
        .jin-flash_item {
            padding-top: 20px;
            font-size: 14px;
        }
        .jin-flash_item:hover {
            background-color:#f3f3f3;
        }
            .jin-flash_item.important, .jin-flash_item.important .l-time {
                color: #e74c3c;
            }

            .jin-flash_item.is-relevance-important {
                background-color: #fffce0;
            }
        .l-date {
            display: inline-block;
            padding-right: 30px;
            padding-bottom: 20px;
        }
        .r-content{
            display:inline-block;
        }
        .l-icon {
            font-family: iconfont !important;
            font-size: 14px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: .2px;
            -moz-osx-font-smoothing: grayscale;
            display: inline-block;
            width: 24px;
            line-height: 24px;
            border-radius: 50%;
            background-color: #5a9df7;
            font-size: 12px;
            text-align: center;
            margin-left: 10px;
            color:white;
            /*display: inline-block;
            font-family: iconfont !important;
            font-size: 14px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: .2px;
            -moz-osx-font-smoothing: grayscale;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            border: 1px solid blue;
            background-color: blue;*/
        }

        .l-time {
            display: inline-block;
            padding-left: 7px;
            color: #737c8c;
        }
    </style>
    <script>
        $(function () {
            $(".jin-flash_list").on("click", ".jin-flash_item", function () {
                $(this).parent().find(".jin-flash_item").removeClass("is-relevance-important");
                $(this).addClass("is-relevance-important");
            });
        })
    </script>

}